Scrapbox Readerを改良してみたい
Scrapbox_Readerを改良してみたいtakker.icon
動機
スマホからscrapbox編集する人#5f7fd6d91280f00000efa670
React.jsの勉強も兼ねてちょっといじってみたい
Vue.js辛いので代わりに/emoji/react.icon使いたい
主に実装したいこと
比較的すぐに実装できそうなもの
関連ページリストに相当する機能の実装
ScrapScriptsみたいにhover表示できるようにしたい
/takker/関連ページリストを吹き出し表示するUserScriptを/icons/react.iconでいい感じに書き換えれば行けそう
外部Projectも吹き出し表示する
閲覧専用なので、精神への影響とか考えなくていい
1 hop linkの吹き出し表示が難しいかな
1 hop linkだけページ下部に表示する
/emoji/question.iconsmartphoneやtablet PCでどうhoverを表現するんだ?
長押しとか?
やっぱりそれかなあ
:hoverや:touchを設定すればいけそう
存在しないページで404になってしまって関連ページに飛べないのでこれはできるとよさそう
リンクを踏んでも何も起きないようにすればいいかな
リンク先ページの吹き出し表示
これも閲覧専用なので外部Projectも表示できるようにする
syntax highlight
highlight.jsを使えばいいのかな?takker.icon
/emoji/youtube.icon埋め込み
URLからparseする必要がある
/icons/YouTube.iconのURLを識別する正規表現さえ作れればおk
/icons/done.iconページタイトルとか
既に表示されてるから問題なし
と思ったら<title>がないのか
作った
/icons/doing.iconついでに逆SEO対策としてページにnoindexを付けたほうが良さそう
ただのクローンがindexされても嬉しくないし
クローンのほうが先にindexされてしまうと、本家がクローンとして判定されかねないし
関連ページリストが実装されることもっと多くのページが無駄にindexされてしまう
後ほどPR出します
ありがたい
ES5を使っている?
これってIE対策でしょうか?takker.icon
/emoji/internet explorer.icon切っても構わないなら、ESNextに変えてもいいでしょうか?
Next.jsのデフォルトなだけ
おそらくbabelとかでも変換されるから、tsconfigを変えたところで効果ないかも知れない
JavaScriptにも対応しているから、tscをわざわざ使うより一緒に変換するほうが実装楽そうだし
package.jsonを見る限りbabelは使っていないようですが
もしかしてNext.js内部で使っています?takker.icon
(Next.js何もわからないで言っている)
そう。Next.jsに含まれてる
なるほど
ESNextにしても問題なさそうですね
??ではなく||を使っている部分があったので気になっていました
多分それは意図的だったはず。nullableではなく空文字列が来るとかで
が{ content: "" }になる
あとtsconfigのtargetはコンパイル対象であって、書くコードを制限するものじゃない
あんまりよく理解していませんでした……
あとで調べてみます
PWA対応
next-offlineを使うらしい
テロメアも欲しい
ただ外部に書かれているものを読むだけなら、そんなに必要ないけど
井戸端とか、頻繁に更新されるようなページを差分だけ読むときにないと厳しい
コードブロック記法 & テーブル記法のファイル名にリンクを入れる
コードは書けたけど何故かdeployに失敗した
ゆっくり考えること
KaTeXを入れる
好きなUserCSSを使えるようにする
dark themeとか
Scrapbox Readerのこれから
ページリストは欲しい
Pull request出せば実装できるかなあ?
vercelでどういうふうにdeployしているかがいまいちわからないので、そこだけ調べる必要がある
pull requestすると自動でpreview deployするし、それをmergeすると自動でdeployされる
なので実質的にPRさえ投げておけば好きなカスタマイズしたものを使えるようになる
なるほどこんな感じですねtakker.icon